<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<form class="layui-form" onclick="return false">
   <div class="layui-form-item">
    <label class="layui-form-label">属性名</label>
    <div class="layui-input-inline">
      <input type="text" id="attrname" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
                   <label class="layui-form-label">属性类型</label>
                   <div class="layui-input-block">
                     <select name="interest" id="attrtype"  lay-filter="aihao">
                       <option value=""></option>
                       <option value="0">规格参数</option>
                       <option value="1">销售属性</option>
                     </select>
                   </div>
      </div>
     <div class="layui-form-item">
                         <label class="layui-form-label">值类型</label>
                         <div class="layui-input-block">
                           <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
                         </div>
             </div>
      <div class="layui-form-item">
          <label class="layui-form-label">可选值</label>
          <div class="layui-input-inline">
            <div id="valueselect"></div>
          </div>
        </div>

     <div class="layui-form-item">
         <label class="layui-form-label">所属分类</label>
         <div class="layui-input-block">
           <input type="text" name="areas" id="catelogName" style="display: none;" />
         </div>
       </div>


       <div class="layui-form-item">
           <label class="layui-form-label">所属分组</label>
           <div class="layui-input-block">
             <select name="interest" id="groupName" lay-filter="aihao">
               <option value=""></option>
               <option value="0">写作</option>
             </select>
           </div>
         </div>
         <div class="layui-form-item" pane="">
             <label class="layui-form-label">可检索</label>
             <div class="layui-input-inline">
               <input type="checkbox" checked="" id="searchtype" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
             </div>
         </div>

          <div class="layui-form-item">
                     <label class="layui-form-label">快速展示</label>
                     <div class="layui-input-block">
                       <input type="checkbox" id="showdesc" name="" lay-skin="switch" lay-text="ON|OFF">
                     </div>
          </div>

          <div class="layui-form-item">
                     <label class="layui-form-label">启用状态</label>
                     <div class="layui-input-block">
                       <input type="checkbox" name="close" id="enable" lay-skin="switch" lay-text="ON|OFF">
                     </div>
         </div>
      <button class="layui-btn"  id="verivy" style="margin-left: 100px">确认</button>
      <button class="layui-btn layui-btn-primary" type="reset">重置</button>
</form>


<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" ></script>
<script src="../../lib/layui-v2.5.5/layui.js" ></script>



</body>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;

  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });

  //自定义验证规则

  //监听指定开关
  form.on('switch(switchTest)', function(data){
    layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
  });

});
</script>

<script type="text/javascript">
  layui.config({
    base: '../../js/ext/'
  }).extend({
    cascader: 'cascader/cascader'
  }).use(['jquery', 'cascader'], function () {
    var $ = layui.jquery, cascader = layui.cascader;
	var areaTree =getdata();

	function getdata(){
            var datac=[];
            $.ajax({
                url:'/product/pmscategory/list/tree',
                type:'get',
                async:false,
                success:function(databack){
                  datac=databack
                }
            });
            return datac.data;
        }

    cascader.render({
      elem: $('input[name=areas]')[0],
      multiple: false,
      showAllLevels: true,
      props: {
        label: 'name',
        value: 'catId',
        children: 'children'
      },
      options: areaTree
    });
  });
  </script>

   <script type="text/javascript">
    			//加载组件
    			layui.config({
    				base: '../../js/ext/'
    			}).extend({
    				xmSelect: 'xmselect/xm-select'
    			}).use(['xmSelect'], function(){
    				var xmSelect = layui.xmSelect;

    				//渲染多选
    				var valueselect=xmSelect.render({
    					el: '#valueselect',
    					filterable: true,
    					create: function(val, arr){
    						if(arr.length === 0){
    							return {
    								name:  val,
    								value: val
    							}
    						}
    					},
    					data: []
    				});
    				// $("#demo1-test1").on('click',function(){
    				// 	var selectArr = demo1.getValue();
    				// });

    //新增
    			$("#verivy").on('click',function() {


            	        var v=valueselect.getValue('name');
            	        var k=v.toString();
            	        console.log(k);

            	        var cid=$("input[name=areas]").val();
                        var a = cid.split(',');
            	    $.ajax({
                            url:"/product/pmsspu/add1",
            	            type:"get",
            	            data:{
                                    valueselect:k


            	            },
            	            dataType:"json",
            	            success:function(data) {
            	              if (data==0) {
                              					layer.msg('修改失败！',{icon:5,offset:"auto",time:2000});//提示框
                              					}else  {
                              							layer.msg('修改成功！',{icon:6,offset:"auto",time:2000});//提示框
                              						}
                              						setTimeout(function(){
                              							var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
                              							parent.layer.close(index);//关闭弹出层
                              							parent.layui.table.reload("spu"); //重新加载页面表格
                              						}, 2100);
            	            }
            	    })

            	});


    			})
    		</script>
</html>